<template>
  <div>
    <el-row style="background-color: #f7f8fB;line-height: 40px;color: #999999;font-size: 16px">
      <el-col :span="2" :offset="3"><span  @click="shou">铁路首页</span></el-col>
      <el-col :span="2" style="margin-left: -60px"><i class="el-icon-s-home" style="font-size: 18px"></i>&nbsp;商城首页</el-col>
      <el-col :span="1" :offset="9">异议反馈</el-col>
      <el-col :span="1"><i class="el-icon-phone-outline">客户服务</i></el-col>
      <el-col :span="1">我的商城</el-col>
      <el-col :span="1">消息推送</el-col>
      <el-col :span="1" v-if="tokenValue">登录</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3">
        <img src="../img/goodsLogo.png" style="width: 350px;margin-left: 10px;margin-top: 10px">
      </el-col>
      <el-col :span="4" :offset="2" style="margin-top: 30px">
        <el-input placeholder="请输入内容" style="width: 500px;" v-model="sou">
          <template slot="append">
            <el-button style="background-color: #3b99fc;color: white;border-radius: 0;width: 90px;font-size: 16px" @click="chazhao">搜索</el-button>
          </template>
        </el-input>
        <br><br>
        <a style="color: #666666">德玛仕厨房设备</a>
        <a style="color: #666666;margin-left: 20px">全棉时代女工卫生用品</a>
      </el-col>
      <el-col :span="4" :offset="3">

          <el-button @click="gouwu" style="background-color: #f7f8fb;border-radius: 20px;margin-top: 30px;width: 150px;height: 45px">&nbsp;我的购物车
            <el-badge :value="numberAll" class="item"></el-badge>
          </el-button>
        <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px"  @click="TiaoOrder">我的订单</el-button>
      </el-col>
    </el-row>
    <el-row style="background-color: #3399ff;;height:50px;margin-top: 20px;font-size: 20px;line-height: 50px;color: white">
      <el-col :span="3" :offset="3" style="background-color: #1e7eff;font-weight: 600">
        全部商品分类
      </el-col>
      <el-col :span="1"  style="background-color: #1e7eff">
        <i class="el-icon-s-grid" style="font-size: 20px;margin-left: -20px"></i>
      </el-col>
      <el-col :span="3" style="font-weight: 600">
        铁路防疫物资专区
      </el-col>
      <el-col :span="2" style="font-weight: 600">
        铁路消费帮扶专区
      </el-col>
      <el-col :span="3" style="font-weight: 600">
        批量采购专区
      </el-col>
    </el-row>
    <div @mouseleave="leaveTwo">
      <div style="width: 335px;height:630px;background-color: #418CCD;position: absolute ; z-index: 3;margin-left: 251px;opacity: 0.8">
        <div v-for="one in findOne" :key="one.id"  @mouseover="changeOne($event,one.sortId)" @mouseleave="leaveOne($event)" class="liulan">
            {{one.sortName}}
        </div>
      </div>
      <div id="two" style="width:750px;height: 630px;opacity: 0.9;position: absolute;background-color: white;z-index: 3;margin-left: 586px;display: none">
        <div v-for="two in findTwo" style="width: 400px;margin-top: 30px">
          <span style="font-size: 20px;margin-left: -220px;font-weight: 600">{{two.sortName}}</span><br><br>
          <span style="font-size: 20px">{{two.sortName}}</span><br><br>
          <img :src="two.sortPic" width="180px;" height="180px" @click="findGoodsBySid(two.sortId)">
        </div>
      </div>
    </div>
    <div style="width: 300px;z-index:3;background-color: darkslateblue;height: 300px;position: absolute;margin-left: 1386px;margin-top: 120px;border-radius: 10px;opacity: 0.8">
        <div class="block" style="margin-top: 30px"><el-avatar :size="70" :src="circleUrl"></el-avatar></div>
        <span style="line-height: 60px;font-size: 18px;color: white">Hi,欢迎光临铁路12306商城 !</span>
        <div  v-if="tokenValue">
          <el-button style="background-color: #f7f8fb;font-weight: 600;margin-top:30px;border-radius: 15px;width: 100px;height: 45px" @click="logi">登录</el-button>
          <el-button style="background-color: #f7f8fb;font-weight: 600;border-radius: 15px;width: 100px;height: 45px" @click="zhu">注册</el-button>
        </div>
        <div v-else>
          <span style="font-size: 20px;color: white">祝您购物愉快 !</span><br>
          <el-button style="color: black;font-weight: 600;background-color:mintcream ;margin-top:20px;border-radius: 15px;width: 100px;height: 45px" @click="mi">个人信息</el-button>
        </div>
    </div>
    <el-row>
      <template>
        <div class="block" style="display: block">
          <span class="demonstration"></span>
          <el-carousel height="700px">
            <el-carousel-item v-for="img in LBT" :key="img">
              <img :src="img" width="100%" height="700px">
            </el-carousel-item>
          </el-carousel>
        </div>
      </template>
    </el-row>
  </div>
</template>

<script>
import zhuce from "./zhuce.vue";

export default {
  name: "goods",
  computed: {
    zhuce() {
      return zhuce
    }
  },
  data(){
    return{
      LBT:[
        "https://img2.baidu.com/it/u=2542542872,2495718227&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=320",
        "https://img2.baidu.com/it/u=3221141073,1979607658&fm=253&fmt=auto&app=138&f=JPEG?w=712&h=375",
        "https://img1.baidu.com/it/u=3596049241,2523927275&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500",
        "https://img2.baidu.com/it/u=2517618784,1660845035&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500"
      ],
      findOne:{},
      findTwo:{},
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      tokenValue:true,
      numberAll:0,
      sou:''
    }
  },
  methods:{
    findBySortOne(){
      this.$axios.get("/sort/selectBySortIdAndOne").then(res=>{
        this.findOne = res.data.data
        console.log(this.findOne)
      })
    },
    gouwu(){
      this.$router.push('/goodsCart')
    },
    changeOne(event,id){
      // 获取当前鼠标悬停的元素（div）
      const hoveredElement = event.target;
      // 修改当前悬停元素的样式
      hoveredElement.style.color='blue'
      hoveredElement.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
      //根据sort_id查询二级目录
      this.$axios.get("/sort/selectBySortIdAndTwo",{params:{sid:id}}).then(res=>{
        this.findTwo = res.data.data
        //二级目录盒子显示
        const two = document.getElementById('two');
        two.style.display='block'
      })
    },
    chazhao(){
      if (this.sou==''){
        return
      }
      this.$axios.get('/goods/selectLike',{params:{src:this.sou}}).then(res=>{
        this.$router.push({path:'/goodsList',query: {data:res.data.data}})
      })
    },
    leaveOne(event){
      const hoveredElement = event.target;
      hoveredElement.style.color='white'
      hoveredElement.style.backgroundColor = '#23476a';
    },
    leaveTwo(){
      //二级目录盒子隐藏
      const two = document.getElementById('two');
      two.style.display='none'
    },
    findGoodsBySid(id){
      this.$router.push({path:'/goodsList',query:{key:id}})
    },
    shou(){
      this.$router.push('/')
    },
    logi(){
      this.$router.push('/login')
    },
    mi(){
      this.$router.push('/myInfo')
    },
    zhu(){
      this.$router.push('/zhuce')
    },
    toke(){
      const token = localStorage.getItem('token');
      console.log(token)
      if (token==null){
        this.tokenValue = true;
      }else {
        this.tokenValue = false;
        this.circleUrl='https://t8.baidu.com/it/u=546722185,2041312483&fm=3031&app=3031&size=f242,150&n=0&f=JPEG&fmt=auto?s=7E280CC752DA63D65709858D0300D083&sec=1699635600&t=0ccb4f1cda8fafc6d25730a96d61bd72'
      }
    },
    TiaoOrder(){
      this.$router.push('/goodsOrder')
    },
    quanju(){
      this.$axios.get('/cart/findAllByUid').then(res=>{
        this.numberAll = res.data.data.length
      })
    }
  },
  mounted() {
    this.findBySortOne()
    this.toke()
    this.quanju()
  }
}
</script>

<style scoped>
.liulan{
  background-color:#23476a;
  height: 70px;
  z-index: 5;
  opacity: 0.8;
  color: white;
  line-height: 70px;
  font-size: 19px;
  font-weight: 600;
}
.item {
  margin-top: -10px;
}
</style>
